<template>
  <div>
    <div class="nav">
      <a href="javascript:;" class="back" @click="goBack">
        <i class="el-icon-arrow-left"></i> 返回
      </a>
      <span class="target" v-for="(item, index) in navList">
        {{ item }}
        <i class="el-icon-arrow-right" v-if="index < navList.length - 1"></i>
      </span>
    </div>
    <div class="content">
      <div class="header">
        <h1>{{ detailData.courseName }}</h1>
        <h4>{{ examData.examName }}</h4>
      </div>
      <div class="box">
        <div class="default" v-if="!autoPage">
          <div>
            <span style="font-size:16px">选择班级：</span>
            <el-select
              style="width:290px"
              v-model="classId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
              size="large"
              @change="selectChange"
            >
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.className"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div style="margin-top:30px;line-height:48px">
            <span style="font-size:16px">自动翻页：</span>
            <el-radio v-model="radio" label="1" border size="middle"
              >开启</el-radio
            >
            <el-radio v-model="radio" label="2" border size="middle"
              >关闭</el-radio
            >
            <a
              href="javascript:;"
              @click="openSet"
              style="font-size:16px;color:#007CDC"
              >设置</a
            >
          </div>
          <!-- <el-button
            type="info"
            style="width:386px;height:72px;background:#DEE6EC;color:#101010;border:none;font-size:20px"
            @click="openSet"
          >设置自动翻页</el-button>
          <br />-->
          <el-button
            type="info"
            style="width:386px;height:40px;background:#DEE6EC;color:#101010;border:none;font-size:16px;margin-top:30px"
            @click="startAns"
            >开始答题</el-button
          >
        </div>
        <div class="autoPage" v-if="autoPage">
          <h3>设置自动翻页</h3>
          <div class="form">
            <div class="item">
              <label>
                选择题间隔时间：
                <el-input
                  placeholder="请输入时间"
                  v-model="form.choiceInterval"
                  style="width:calc(100% - 180px)"
                  type="number"
                  min="1"
                >
                  <template slot="append">(秒)</template>
                </el-input>
              </label>
            </div>
            <div class="item">
              <label>
                判断题间隔时间：
                <el-input
                  placeholder="请输入时间"
                  v-model="form.judgeInterval"
                  style="width:calc(100% - 180px)"
                  type="number"
                  min="1"
                >
                  <template slot="append">(秒)</template>
                </el-input>
              </label>
            </div>
            <!-- <div class="item">
              <label>
                简答题间隔时间：
                <el-input
                  placeholder="请输入时间"
                  v-model="form.time3"
                  style="width:calc(100% - 180px)"
                  type="number"
                  min="1"
                >
                  <template slot="append">(秒)</template>
                </el-input>
              </label>
            </div>-->
            <div class="item">
              <el-checkbox v-model="form.isSaved">始终保存设置</el-checkbox>
            </div>
            <div style="text-align:right">
              <el-button @click="saveSet">确认</el-button>
              <el-button @click="cancelSet">取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { classList } from "@/api/student";
import { allCategory, bindCourseClass } from "@/api/system";
import { getCourseById } from "@/api/course";
import { examDetail, examGetSetting, examSetSetting } from "@/api/exam";
import { mapMutations, mapGetters } from "vuex";
import { setClassSession, getClassSession } from "@/util/auth";
export default {
  name: "TrainAssess",
  data() {
    return {
      autoPage: false,
      form: {
        choiceInterval: 0,
        classId: 0,
        courseId: 0,
        examPaperId: 0,
        id: null,
        isSaved: false,
        judgeInterval: 0
      },
      navList: ["全部"],
      detailData: {},
      typeList: [],
      courseId: "",
      examData: {},
      examId: "",
      classId: "",
      loading: false,
      classList: [],
      radio: "1"
    };
  },
  computed: {
    ...mapGetters(["getCourseData"])
  },
  methods: {
    ...mapMutations(["SetExamData"]),
    remoteMethod(query) {
      this.loading = true;
      classList({ className: query, pageIndex: 1, pageSize: 20 })
        .then(res => {
          this.loading = false;
          if (res.code == 1) {
            this.classList = res.response.list;
          }
        })
        .catch(res => {
          this.loading = false;
        });
    },
    selectChange(value) {
      setClassSession(value);
    },
    goBack() {
      this.$router.goBack();
    },
    startAns() {
      if (!this.classId) {
        this.$message({
          showClose: true,
          message: "请先选择班级"
        });
        return;
      }
      bindCourseClass({
        classId: this.classId,
        courseId: this.courseId
      });
      this.$router.push({
        path:
          "/train/assess/exam/" +
          this.examId +
          "?courseId=" +
          this.courseId +
          "&autoPage=" +
          this.radio
      });
    },
    //翻页设置
    openSet() {
      if (!this.classId) {
        this.$message({
          showClose: true,
          message: "请先选择班级"
        });
        return;
      }
      this.getSetting();
      this.autoPage = true;
    },
    cancelSet() {
      this.autoPage = false;
    },
    saveSet() {
      let data = JSON.parse(JSON.stringify(this.form));
      data.isSaved = data.isSaved * 1;
      examSetSetting(data).then(res => {});
      this.cancelSet();
    },
    async getModules() {
      await allCategory({ categoryId: 1 }).then(res => {
        if (res.code == 1) {
          res.response.map(item => {
            this.typeList[item.id] = item.concreteName;
          });
        }
      });
      await allCategory({ categoryId: 0 }).then(res => {
        if (res.code == 1) {
          res.response.map(item => {
            this.typeList[item.id] = item.concreteName;
          });
        }
      });
    },
    async initData() {
      await this.getModules();
      if (this.getCourseData && this.getCourseData.id) {
        this.detailData = this.getCourseData;
        this.navList.push(this.typeList[this.getCourseData.courseProject]);
        this.navList.push(this.getCourseData.courseName);
        this.navList.push(this.typeList[this.getCourseData.courseType]);
      } else {
        getCourseById(this.courseId).then(res => {
          if (res.code == 1) {
            this.detailData = res.response;
            this.navList.push(this.typeList[this.detailData.courseProject]);
            this.navList.push(this.detailData.courseName);
            this.navList.push(this.typeList[this.detailData.courseType]);
          }
        });
      }
      //试题信息
      examDetail(this.examId).then(res => {
        if (res.code == 1) {
          this.examData = res.response;
          this.SetExamData(this.examData);
        }
      });
    },
    //获取翻页设置
    getSetting() {
      this.form = {
        choiceInterval: 120,
        classId: this.classId,
        courseId: this.courseId,
        examPaperId: this.examId,
        id: null,
        isSaved: false,
        judgeInterval: 120
      };
      examGetSetting({
        classId: this.classId,
        courseId: this.courseId,
        examPaperId: this.examId
      }).then(res => {
        if (res.code == 1) {
          this.form = res.response;
          this.form.isSaved = this.form.isSaved == 1 ? true : false;
        }
      });
    }
  },
  created() {
    this.examId = this.$route.params.id;
    this.courseId = this.$route.query.courseId;
    if (getClassSession()) {
      this.classId = getClassSession() * 1;
      this.getSetting();
    }
    this.initData();
    this.remoteMethod();
  }
};
</script>
<style lang="scss" scoped>
.nav {
  box-sizing: content-box;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 400;
  .back {
    display: inline-block;
    width: 100px;
    background-color: #fff;
    text-align: center;
    margin-right: 20px;
  }
}
.content {
  margin-bottom: 20px;
  height: 783px;
  background-color: #fff;
  .header {
    height: 153px;
    background-color: #cbe7fd;
    padding: 30px 0 30px 78px;
    h1 {
      font-size: 25px;
      line-height: 60px;
      font-weight: 400;
    }
    h4 {
      line-height: 30px;
      font-size: 16px;
      font-weight: 100;
    }
  }
  .box {
    padding-top: 63px;
    .default {
      width: 386px;
      margin: 0 auto;
    }
    .autoPage {
      width: 613px;
      height: 440px;
      margin: 0 auto;
      background-color: #f9f9f9;
      padding: 40px;
      h3 {
        font-size: 20px;
        line-height: 36px;
      }
      .form {
        margin-top: 30px;
        font-size: 16px;
        > div.item {
          margin-top: 30px;
        }
        label {
          font-weight: 100;
        }
      }
    }
  }
}
</style>
